/* global chrome */
let holdTableObervers = null
import { getElement } from '@/content-scripts/getElement.js'
export function observeHoldAsset() {
    if (holdTableObervers) holdTableObervers.disconnect();

    let previousValues = {
        tabValue: null
    };
    holdTableObervers = new MutationObserver(() => {
        const tabs = getElement("person.existing.assets.tabs")[0]
        // console.log(tabs, 'holdTableOberversholdTableObervers');

        const hasChanged = tabs.innerHTML !== previousValues.tabValue

        if (tabs && hasChanged) {
            previousValues = {
                tabValue: tabs.innerHTML
            }
            setTimeout(() => {
                createHoldsAsset(previousValues)
            }, 100)

        }

    });
    holdTableObervers.observe(document.body, {
        childList: true,
        subtree: true,
        attributes: true,
        characterData: true,
    });
}

import TradingTable from "@/content-scripts/components/table/TradingTable.vue";
// import { getInStockTableColumns, stockTransacRecordCol, getTransacTobotColList, stockAssetCol, currentBorrowingCol, borrowingDetailsCol } from '@/content-scripts/components/table/columns/inStockColumns.js'
import { holdsAsseTableCol } from '@/content-scripts/components/table/columns/inStockColumns.js'
import { language } from "@/content-scripts/locales";


import { createApp } from "vue";
import Antd from "ant-design-vue";

let holdAsseApp = null
function createHoldsAsset(params) {
    console.log(params, 'createHoldsAsset');
    console.log(params.tabValue.includes(language.my), 'createHoldsAsset');
    const container = getElement("person.existing.assets.table")[0]
    const existingOverlay = container.querySelector(".my-hold-asset-overlay");
    if (existingOverlay) {
        existingOverlay.remove();
        const thead = container.querySelector('thead')
        if (thead) {
            thead.style.display = ''
        }
        const tbody = container.querySelector('tbody')
        if (tbody) {
            tbody.style.display = ''
        }
    }

    localStorage.setItem('pagePagination', JSON.stringify({ current: params.current, size: params.pageSize, isChange: false }))
    console.log(params, '传guolai');


    if (!container) {
        console.log('未找到 个人页面已有资产 的表格节点');

    } else {
        // 更新修改的值
        if (params.tabValue.includes(language.my)) {
            const thead = container.querySelector('thead')
            if (thead) {
                thead.style.display = 'none'
            }
            const tbody = container.querySelector('tbody')
            if (tbody) {
                tbody.style.display = 'none'
            }
            let tableSource = []
            let tableColumns = []
            chrome.runtime.sendMessage({
                type: "proxy",
                method: "GET",
                // url: `/user/trade/order/page`,
                url: `/user/account/get/asset`,
                body: { ...params, leaderId: JSON.parse(localStorage.getItem('userInfo')).leaderId }
            }, (response) => {

                tableSource = JSON.parse(JSON.stringify(response.data))
                tableColumns = holdsAsseTableCol

                const overlay = document.createElement("div");
                overlay.setAttribute("class", "my-hold-asset-overlay");
                overlay.setAttribute(
                    "style",
                    "position: relative;\n" +
                    " left: 0;\n" +
                    " top: 0;\n" +
                    " width: 100%;\n" +
                    " height: 100%;\n" +
                    "min-height: 362px"
                );

                const tableStyle = {
                    // fontSize: "12px",
                    color: "#8e949e",
                    // background: "#F8F9FB",
                };

                // 挂载元素
                const appContainer = document.createElement("div");

                holdAsseApp = createApp(TradingTable); // 创建 Vue 应用
                console.log(tableSource, 'tasssssssssssssss');

                holdAsseApp.provide("tableSource", tableSource);
                holdAsseApp.provide("tablePagination", tableSource);

                holdAsseApp.provide("tableColumns", tableColumns);
                holdAsseApp.provide("tableStyle", tableStyle);
                holdAsseApp.use(Antd);
                holdAsseApp.mount(appContainer); // 将 Vue 应用挂载到子元素上
                console.log(222221111, 'createTransactionDetails');

                container.style.position = "relative";
                overlay.appendChild(appContainer); // 将子元素添加到 overlay 中
                container.appendChild(overlay); // 将 overlay 添加到 container 中

                console.log(`[代理响应/user/account/get/asset] 状态: ${response.code}, 数据: ${JSON.stringify(response.data)}`);
            });

        }

    }



}
